<template>
	<view>
		<StatusBar />
		<view style="padding: 0 15px;">
			<view class="banner">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
					:duration="1500">
					<template v-if="paginate">
						<swiper-item v-for="(item,index) in paginate.data" :key="index" style="border-radius: 10px;">
							<image :src="baseURL+'/'+item.src_img" alt="" class="img" />
						</swiper-item>
					</template>
				</swiper>
			</view>
			
			<view class="uifont" style="margin:20px 0;">
				已连续喝水0天
			</view>
			
			<div class="container">
			    <div class="wave"></div>
			    <p>45%</p>
			</div>
			
			
			<!-- <view class="justify-center " style="position: relative;">
				<view class="wave-container">
					<view style="padding: 20px;color: #ffffff;flex-direction: column;text-align: center;position: relative;" class="bg-color uifont justify-center align-center wave">
						<view style="font-weight: 700;font-size: 30px;">
							0%
						</view>
						<view style="margin-top: 30px;">
							<view style="font-size: 24px;">
								0/2400ml
							</view>
							<view style="font-size: 18px;">
								实现/目标
							</view>
						</view>
					</view>
				</view>
			</view> -->
			
			<view class="justify-between align-center" style="margin-top: 20px;">
				<view class="myicon icon-lvshuibei"></view>
				<view style="flex: 1;">
					<slider value="18" @change="sliderChange" min="0" max="100" show-value activeColor="#27c2f3" backgroundColor="#C0C4CC"/>
				</view>
				<view class="myicon icon-shezhi"></view>
			</view>
			
			
			
			
			
			
			
		</view>
		
		<view :style="{height:`${constant.bottom_bar_height}px`}">
			<BottomBar v-model='barIndex'  :barlists="barlists"/>
		</view>
	</view>
</template>

<script>
	import config from '@/pages/water/config.js'
	
	export default {
		data() {
			return {
				constant:this.constant,
				baseURL:this.baseURL,
				barIndex:1,
				paginate:{},
				barlists:config.barlists,
			}
		},
		onLoad() {
			this.get('crud/list',{table:'banner'}).then(({code,paginate})=>{
				if(code===1){
					this.paginate = paginate
				}
			})
		},
		methods: {
			sliderChange(e){
				console.log(e)
			}
		}
	}
</script>

<style lang="scss">
	
.banner {
	.swiper{
		.img{
			width: 100%;
			border-radius: 10px;
		}
	}
}
.container {
    position: absolute;
    width: 200px;
    height: 200px;
    padding: 5px;
    border: 5px solid rgb(118, 218, 255);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}
.wave {
    position: relative;
    width: 180px;
    height: 180px;
    background-color: rgb(118, 218, 255);
    border-radius: 50%;
	box-sizing: border-box;
    &::before,
    &::after{
        content: "";
        position: absolute;
        width: 200px;
        height: 200px;
        top: 0;
        left: 50%;
        background-color: rgba(255, 255, 255, .4);
        border-radius: 45%;
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 6s linear infinite;
        z-index: 1;
		box-sizing: border-box;
    }
    
    &::after {
        border-radius: 47%;
        background-color: rgba(255, 255, 255, .9);
        transform: translate(-50%, -70%) rotate(0);
        animation: rotate 10s linear -5s infinite;
        z-index: 2;
		box-sizing: border-box;
    }
}

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    color: #000;
    z-index: 10;
}

@keyframes rotate {
    50% {
        transform: translate(-50%, -73%) rotate(180deg);
    } 100% {
        transform: translate(-50%, -70%) rotate(360deg);
    }
}
</style>
